<template>
	<view>
		<nav-box title="历史成绩" :borderBottom="true">
			<text v-if="list.length != 0" @click="editList">{{editInfo ? '完成' : '管理'}}</text>
		</nav-box>
		<view class="empty-box" v-if="list.length == 0">
			<image src="../../static/images/empty_icon.png" mode=""></image>
			<view>暂无收录的错题</view>
		</view>
		<template v-else>
			<view class="content">
				<view class="tab-box">
					<view class="tab-item" :class="current == 1 ? 'active' : ''" @click="tabChange(1)">练习</view>
					<view class="tab-item" :class="current == 2 ? 'active' : ''" @click="tabChange(2)">测评</view>
				</view>
				<view class="list-box">
					<view :class="[timeSort ? 'change-style' : '', 'change-box']" @click="timeChange">
						<text>排序</text>
						<image src="../../static/images/icon_3.png" mode=""></image>
					</view>
					<view v-show="editInfo">
						<u-checkbox-group @change="checkboxGroupChange">
							<view class="item-box" v-for="(item, index) in list" :key="item.id">
								<u-checkbox :name="item.id" size="48" v-model="item.checked" shape="circle" @change="checkboxChange">
									<view class="label-box">
										<view class="label-title">{{ item.title }}</view>
										<text class="label-text">{{ item.score }}分</text>
										<text class="label-text">{{ item.date }}</text>
									</view>
								</u-checkbox>
							</view>
						</u-checkbox-group>
					</view>
					<view v-show="!editInfo">
						<view class="item-box" v-for="(item, index) in list" :key="item.id">
							<view class="label-box">
								<view class="label-title">{{ item.title }}</view>
								<text class="label-text">{{ item.score }}分</text>
								<text class="label-text">{{ item.date }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="footer-box" v-show="editInfo">
					<u-checkbox size="48" v-model="allCheck" shape="circle" @change="checkedAll">全选</u-checkbox>
					<u-button shape="circle" :hair-line="false" hover-class="none" :custom-style="btnStyle" @click="removeInfo()">删除</u-button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btnStyle: {
				height: '40px',
				backgroundColor: '#2D6EFF',
				color: '#FFFFFF',
				marginRight: '0'
			},
			timeSort: false, // false 近  true 远
			current: 1,
			list: [],
			editInfo: false, //编辑的状态
			allCheck: false, //是否全选
		};
	},
	onLoad() {
		// 在这里走接口获取错题集数组替换测试数据
		this.list = [
			{
				id: 1,
				title: '第124套基础知识练习',
				score: '90',
				date: '2021/01/07',
				checked: false //是否选中
			},
			{
				id: 2,
				title: '第124套基础知识练习',
				score: '90',
				date: '2021/01/07',
				checked: false
			},
			{
				id: 3,
				title: '第124套基础知识练习',
				score: '90',
				date: '2021/01/07',
				checked: false
			},
			{
				id: 4,
				title: '第124套基础知识练习',
				score: '90',
				date: '2021/01/07',
				checked: false
			}
		];
	},
	methods: {
		// 顶部标签切换
		tabChange(key) {
			this.current = key;
		},
		// 时间远近切换 走接口排序
		timeChange() {
			this.timeSort = !this.timeSort;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			// console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			console.log(e);
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = !this.allCheck;
			});
		},
		// 切换编辑状态
		editList() {
			this.editInfo = !this.editInfo
			this.allCheck = false
			this.list.map(val => {
				val.checked = false;
			});
		},
		//对列表删除操作
		removeInfo() {
			//删除完切换编辑状态
			this.editInfo = false
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 110upx;
	}
.empty-box {
	width: 100%;
	padding-top: 140upx;
	text-align: center;
	color: #949dae;
	image {
		width: 500upx;
		height: 500upx;
	}
}
.content {
	.tab-box {
		display: flex;
		.tab-item {
			width: 50%;
			box-sizing: border-box;
			height: 96upx;
			text-align: center;
			line-height: 96upx;
			color: #6e6e6e;
			position: relative;
		}
		.active {
			color: $color-2d6;
			font-size: 40upx;
			font-weight: 600;
			background-color: #ffffff;
			&::after {
				content: '';
				display: block;
				width: 16upx;
				height: 8upx;
				border-radius: 4upx;
				background-color: $color-2d6;
				position: absolute;
				left: 50%;
				bottom: 8upx;
				transform: translateX(-50%);
			}
		}
	}
	.list-box {
		background-color: #ffffff;
		padding-top: 40upx;
		.change-box {
			display: flex;
			align-items: center;
			color: #6e6e6e;
			font-size: 24upx;
			margin-bottom: 18upx;
			padding-left: 40upx;
			image {
				width: 8upx;
				height: 20upx;
				margin-left: 8upx;
			}
		}
		.change-style {
			image {
				transform: rotate(180deg);
			}
		}

		.item-box {
			width: 100%;
			padding: 30upx 40upx;
			&:not(:last-child) {
				border-bottom: 2upx solid #f1f1f1;
			}
			.label-title {
				font-size: 32upx;
				color: #4b4b4b;
				margin-bottom: 16upx;
			}
			.label-text {
				display: inline-block;
				font-size: 28upx;
				color: #7e7e7e;
				&:not(:last-child) {
					margin-right: 30upx;
				}
			}
		}
	}
}
.footer-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 100upx;
	border-top: 2upx solid #F1F1F1;
	background-color: #FFFFFF;
	padding: 0 40upx;
}
</style>
